<!-- 高德地图 -->
<template>
        <div id="mapContainer" style="width: 100%; height: 100%;">
        </div>
</template>
   
<script>
   import { createApp } from 'vue';
   import  AMapLoader  from '@amap/amap-jsapi-loader';
    
   export default {
     name: 'Map',
     mounted() {
       AMapLoader.load({
         key: 'b7bf26bc14ce534da4dccc93d74089d1', // 替换为你的高德地图API Key
         version: '2.0',
         plugins: ['AMap.Geolocation'],
       }).then((AMap) => {
         // 创建地图实例
         const map = new AMap.Map('mapContainer', {
           zoom: 13,
           center:[116.39,39.9],
         });
         
         // 添加定位控件
         map.plugin(['AMap.Geolocation', 'AMap.Scale'], function() {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0, // 定位结果缓存0毫秒，默认：0
            convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, // 显示定位按钮，默认：true
            buttonPosition: 'RT', // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true, // 定位成功后将定位精度范围显示在地图上，默认：true
            useNative: true, // 是否使用安卓定位sdk用来进行定位，默认：false
          });
          map.addControl(geolocation);
          map.addControl(new AMap.Scale()); 
         });
       });
     },
   };
</script>
 